<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教练员列表</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <script src="../../res/js/base.js"></script>
</head>
<body>

<table id="demo" lay-filter="test"></table>
<script type="text/javascript">
    //全局同步
    $.ajaxSetup({
        async: false
    });

</script>
<script>
    var table2 = null;
    var form = null;
    layui.use(['table','form'], function() {
        var table = layui.table;
        form = layui.form;


        var url = "http://127.0.0.1:8900/emp/coachs";

        //第一个实例
        table2 = table.render({
            elem : '#demo',
            height : 550,
            toolbar : '#toolbarDemo',
            url : url //数据接口
            ,
            page : true //开启分页
            ,
            cols : [ [ //表头
                {
                    type : 'checkbox',
                    fixed : 'left'
                }, {
                    field : 'coachName',
                    title : '教练员姓名',
                    width : 150
                },{
                    field : 'coachExp',
                    title : '擅长',
                    width : 200
                },{
                    field : 'expertSpecia',
                    title : '专业',
                    width : 200
                },{
                    field : 'phone',
                    title : '联系方式',
                    width : 200
                },{
                    field : 'action',
                    title : '操作',
                    width : 200,
                    toolbar : "#barDemo"
                } ] ]
        });

        loadType();

        //监听工具条
        table.on('tool(test)', function(obj) {

            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    //删除数据在这里可以使用Ajax异步  就和平常使用一样简单

                    var url = "http://127.0.0.1:8900/emp/coach/"+data.coachId;

                    $.ajax({
                        url: url,//地址
                        dataType: 'json',//数据类型
                        type: 'DELETE',//类型
                        timeout: 2000,//超时
                        //请求成功
                        success: function (ret, status) {
                            if (ret.num == 1) {
                                layer.msg(ret.msg, {
                                    icon : 1,
                                    time : 1500
                                }, function() {
                                    newLoad();
                                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                });
                            } else {
                                layer.msg(ret.msg, {
                                    icon : 2,
                                    time : 1500
                                });
                            }
                        },
                        //失败/超时
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            if (textStatus === 'timeout') {
                                layer.msg("请求超时");
                                setTimeout(function () {
                                    layer.msg('重新请求');
                                }, 2000);
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type : 2,
                    title : '教练员编辑',
                    shadeClose : true,
                    shade : 0.8,
                    area : [ '700px', '90%' ],
                    content : 'atsEmpCoach.html?id=' + data.coachId, //iframe的url
                    end : function() {
                    }
                });
            } else if (obj.event === 'select') {
                layer.open({
                    type : 2,
                    title : '教练员查看',
                    shadeClose : true,
                    shade : 0.8,
                    area : [ '700px', '90%' ],
                    content : 'atsEmpCoach.html?select=1&id=' + data.coachId, //iframe的url
                    end : function() {
                    }
                });
            }
        });

        $("#close").click(function() {
            $("#divImg").hide(2000);
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteAllBut':
                    layer.confirm('您真的要删除吗', function(index) {
                        var data = checkStatus.data;
                        var ids = "";
                        $.each(data, function(index, item) {
                            ids += item.coachId + ",";
                        });

                        var url = "http://127.0.0.1:8900/emp/coachs/"+ids;

                        $.ajax({
                            url: url,//地址
                            dataType: 'json',//数据类型
                            type: 'DELETE',//类型
                            timeout: 2000,//超时
                            //请求成功
                            success: function (obj, status) {
                                layer.msg(obj.msg);
                                if(obj.num==1) {
                                    newLoad();//刷新表格
                                }
                            },
                            //失败/超时
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if (textStatus === 'timeout') {
                                    layer.msg("请求超时");
                                    setTimeout(function () {
                                        layer.msg('重新请求');
                                    }, 2000);
                                }
                            }
                        });
                    });
                    break;
                case 'addBut':
                    layer.open({
                        type : 2,
                        title : '教练员编辑',
                        shadeClose : true,
                        shade : 0.8,
                        area : [ '700px', '90%' ],
                        content : 'atsEmpCoach.html', //iframe的url
                        end : function() {
                        }
                    });
                    break;
                case 'seachTable':

                    var name = $("#coachName").val();
                    var exp = $("#expertSpecia").val();
                    var phone = $("#phone").val();

                    table2.reload({
                        url: 'http://127.0.0.1:8900/emp/coachs',
                        where: {
                            coachName: $("#coachName").val(),
                            expertSpecia: $("#expertSpecia").val(),
                            phone: $("#phone").val()
                        },
                        page: { curr: 1 }
                    });

                    loadType(exp);

                    $("#coachName").val(name);
                    $("#phone").val(phone);

                    break;
            }
        });
    });


    /**
     * 用在新增或者修改界面   由子窗口调用
     */
    function newLoad() {
        var name = $("#coachName").val();
        var exp = $("#expertSpecia").val();
        var phone = $("#phone").val();

        layui.table.reload("demo");

        loadType(exp);

        $("#coachName").val(name);
        $("#phone").val(phone);
    }

    function loadType(expertSpecia){
        url = getRootPath() + "AtsBaseSportController/findAll";
        data = null;
        $.post(url,data,function (obj) {
            $.each(obj,function (i,item) {
                $("#expertSpecia").append("<option value='"+item.sportId+"'>"+item.sportName+"</option>");
            });
            $("#expertSpecia").val(expertSpecia);
            form.render();
        },"json");
    };

</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="select">查看</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div>
        <div class="layui-inline">
            <input class="layui-input" name="coachName" id="coachName"
                   autocomplete="off" placeholder="教练员姓名">
        </div>

        <div class="layui-inline">
            <select name="expertSpecia" id="expertSpecia" lay-verify="required" lay-search="">
                <option value="">直接选择或搜索选择体育项目</option>
            </select>
        </div>

        <div class="layui-inline">
            <input class="layui-input" name="phone" id="phone"
                   autocomplete="off" placeholder="联系电话">
        </div>

        <button class="layui-btn layui-btn-sm"  lay-event="seachTable">搜索</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAllBut">删除选中数据</button>
        <button class="layui-btn layui-btn-sm"  lay-event="addBut">增加数据</button>

    </div>
</script>
</body>
</html>